<template>

     <div class="rule">
                <div>
                    <van-nav-bar title="修改昵称" left-arrow @click-left="$router.go(-1)" />
                </div>
               
                <div class="header_placeholder" style="width:100%;height:4rem" id="cust_head"></div>
                <div class="rule_main">
                    <div class="rule_info">
                        <van-cell-group>
                        <van-field v-model="nicename" placeholder="请输入昵称" />
                        </van-cell-group>
                    </div>
                     <div class="but_sty ">
                            <van-button type="primary" @click='up_nickname'>修改</van-button> 
                        </div>
                </div>
            </div>


</template>

<script>

export default {
 name: "login",
data() {
    return {
        nicename:'',
        data:{},
    }
},
mounted() { 
    this.base.head_status(1)

},

 methods: {

         up_nickname(){
                 let that=this;
        
             var data={token:JSON.parse(localStorage.userinfo).token,nickname:that.nicename}
                       that._API.editNickName(data).then(res => {


                             that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
                                        if(res.code==200){

                                        }
                             });

                          
                        
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
           }
               


      }
}
</script>

<style lang="scss" scoped >
 .van-nav-bar{
        background: none;
        width:100%;
        position: fixed;
    }
    .van-nav-bar .van-icon{
        color:#fff;
    }
    .van-nav-bar__arrow{
        font-size:20px;
    }
    .van-nav-bar__title{
        color:#fff;
    }

    .rule_main{
        padding:0 0.8rem;
        width:100%;
        box-sizing: border-box;
    }
    .rule_info {
        display: flex;
            align-items: center;
            box-shadow: inset 0 0 1rem 0px #7b00ff;
    margin: 1rem .8rem;
    border-radius: .5rem;
    }
    .van-cell-group{background: initial}
    .van-cell-group>div{background: initial}
     /deep/.van-field__control, .van-field__control::-webkit-input-placeholder {color: white;}
     .but_sty{    text-align: center;}
      .but_sty button{width: 90%;border: 0;border-radius: 0.5rem;    border-radius: 2rem;    background: #831BFA;}
</style>
